<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <div class="header">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="100px"
            class="flex"
          >
            <el-form-item
              label="所属网点"
              prop="networkNameId"
              style="margin-left: 10px"
            >
              <el-select
                v-model="form.networkNameId"
                placeholder="请选择网点名称"
                style="width: 286px"
              >
                <el-option
                  v-for="item in jsnetdata"
                  :key="item.id"
                  :label="item.networkName"
                  :value="item.networkName"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="出港中心" style="margin-left: 10px">
              <el-select
                v-model="form.leaveCenter"
                filterable
                placeholder="请输入"
                style="width: 286px"
                :options="leaveCenterOptions"
              >
                <el-option
                  v-for="item in cglist"
                  :key="item.id"
                  :label="item.transferCenter"
                  :value="item.transferCenter"
                />
              </el-select>
            </el-form-item>
            <div style="margin-left: 10px; width: 782px">
              <el-form-item label="时间范围" prop="time">
                <el-date-picker
                  v-model="form.time"
                  value-format="yyyy-MM-dd"
                  class="input1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 680px"
                  @change="picker"
                />
              </el-form-item>
            </div>

            <el-form-item>
              <el-button class="cx" @click="cx">查询</el-button>
              <elbutton :obj="form" @dj="cz" />
            </el-form-item>
            <el-form-item label="结算类型" style="margin-left: 10px">
              <el-select
                v-model="form.settleTypeId"
                placeholder="请选择结算类型"
                style="width: 286px"
                @change="jslx"
              >
                <el-option
                  v-for="(item, index) in jstype"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="结算对象" style="margin-left: 10px">
              <el-select
                v-if="form.settleTypeId == 'contractArea'"
                v-model="form.settleObject"
                filterable
                placeholder="请选择结算对象名称"
                :disabled="isJsdx"
                style="width: 286px"
              >
                <el-option
                  v-for="item in cbqjslist"
                  :key="item.id"
                  :label="item.networkName"
                  :value="item.networkName"
                />
              </el-select>

              <el-select
                v-if="form.settleTypeId == 'salesman'"
                v-model="form.settleObject"
                filterable
                placeholder="请选择结算对象名称"
                :disabled="isJsdx"
                style="width: 286px"
              >
                <el-option
                  v-for="item in ywyjslist"
                  :key="item.id"
                  :label="item.solicitor"
                  :value="item.solicitor"
                />
              </el-select>
              <el-select
                v-if="form.settleTypeId == 'client'"
                v-model="form.settleObject"
                filterable
                placeholder="请选择结算对象名称"
                :disabled="isJsdx"
                style="width: 286px"
              >
                <el-option
                  v-for="item in khjslist"
                  :key="item.id"
                  :label="item.clientName"
                  :value="item.clientName"
                />
              </el-select>
              <el-select
                v-if="form.settleTypeId == '' || form.settleTypeId == 'all'"
                v-model="form.settleObject"
                filterable
                placeholder="请选择结算对象名称"
                :disabled="isJsdx"
                style="width: 286px"
              />
            </el-form-item>
            <el-form-item label="是否集包" style="margin-left: 10px">
              <el-select
                v-model="form.isBunching"
                placeholder="请选择是或否"
                style="width: 286px"
              >
                <el-option label="全部" value="0" />
                <el-option label="是" value="1" />
                <el-option label="否" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="重量来源" style="margin-left: 10px">
              <el-select
                v-model="form.settleWeightSource"
                placeholder="请选择重量来源"
                style="width: 286px"
                @change="zlly"
              >
                <el-option
                  v-for="(item, index) in wsource"
                  :key="index"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="重量差范围" style="margin-left: 10px">
              <el-select
                v-model="form.weightDifference"
                placeholder="请选择重量差异类型"
                style="width: 200px"
              >
                <el-option label="结算重量差" value="1" />
                <el-option label="中心重量差" value="2" />
              </el-select>
              >
              <el-input
                v-model="form.weight"
                style="width: 60px"
                @change="nummm"
              />
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <div class="page">
          当前页共<span>{{ tableData.length }}</span
          >项
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="24">
        <elltable :loading="loading" :data="tableData" :th="thlist" />
      </el-col>
    </el-row>
    <div class="block" style="display: flex; justify-content: flex-end">
      <pagination
        :current-page="form.pageDate.pageNum"
        :page-size="form.pageDate.pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleNumChange"
      />
    </div>
  </div>
</template>
<script>
import { getOutletsList } from '@/api/dashboard'
import { cylxhzApi, cgzxmhApi, cbqmhApi, ywymhApi, khmhApi } from '@/api/weight'
export default {
  data() {
    return {
      // 结算类型
      jstype: [
        { value: 'all', label: '全部' },
        { value: 'contractArea', label: '承包区' },
        { value: 'client', label: '客户' },
        { value: 'salesman', label: '业务员' }
      ],
      // 重量来源
      wsource: [
        { value: '0', label: '全部' },
        { value: '1', label: '网点称重' },
        { value: '2', label: '中心称重' },
        { value: '3', label: '体积重' },
        { value: '4', label: '总部结算重量' },
        { value: '5', label: '录单重量' },
        { value: '6', label: '未取到结算重量' }

      ],
      leaveCenterOptions: [],
      // 表格加载状态
      loading: false,
      // 判断结算类型
      isJsdx: true,
      // 时间的初始值
      value1: ['', ''],
      jsnetdata: [],
      form: {
        endTime: '',
        isBunching: '',
        leaveCenter: '',
        networkNameId: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        settleObject: '',
        settleTypeId: '',
        settleWeightSource: '',
        startTime: '',
        weight: '',
        weightDifference: ''
      },
      // 表格内容
      tableData: [],
      // 表头内容
      thlist: [],
      activeName: 'first',
      total: 0,
      // 出港列表
      cglist: [],
      // 承包区对象列表
      cbqjslist: [],
      // 客户对象列表
      khjslist: [],
      // 业务员对象列表
      ywyjslist: [],
      // 表单验证
      rules: {
        networkNameId: [
          { required: true, message: '请选择网点名称', trigger: 'blur' }
        ],
        time: [{ required: true, message: '请选择日期', trigger: 'blur' }]
      }
    }
  },
  async created() {
    this.getjsnetname()
    // 出港模糊查询
    this.cgmhcx()
  },
  methods: {
    // 结算对象模糊查询
    async jsdxmhcx() {
      switch (this.form.settleTypeId) {
        case 'all':
          this.form.settleObject = ''
          this.jslist = []
          break

        case 'contractArea':
          // eslint-disable-next-line no-case-declarations
          const res = await cbqmhApi(this.form.settleObject)
          // console.log('cbq', res)
          this.cbqjslist = res.data

          break

        case 'client':
          // eslint-disable-next-line no-case-declarations
          const res1 = await khmhApi(this.form.settleObject)
          // console.log('kh', res1)

          this.khjslist = res1.data

          break

        case 'salesman':
          // eslint-disable-next-line no-case-declarations
          const res2 = await ywymhApi(this.form.settleObject)
          // console.log('ywy', res2)

          this.ywyjslist = res2.data

          break
      }
    },
    async cgmhcx() {
      const res = await cgzxmhApi(this.form.leaveCenter)
      console.log('出港中心模糊查询', res)
      this.cglist = res.data
    },
    // 查询
    cx() {
      this.$refs.form.validate((res) => {
        if (res) {
          this.inquire()
        }
      })
    },
    // 查询
    async inquire() {
      this.loading = true
      const res = await cylxhzApi(this.form)
      this.loading = false
      if (res.code === 500) {
        this.thlist = []
        this.tableData = []
        return
      }
      this.thlist = res.data.fields
      this.tableData = res.data.list.data
      this.total = res.data.list.total
      console.log('表格的内容', res)
    },
    // 分页改变
    handleSizeChange(value) {
      this.form.pageDate.pageSize = value
      this.form.pageDate.pageNum = 1

      this.inquire()
    },
    handleNumChange(value) {
      this.form.pageDate.pageNum = value
      this.inquire()
    },
    // 输入框一旦改变值
    nummm(value) {
      // console.log(value);
      if (this.form.weightDifference !== '') {
        this.form.weight = Number(value)
        return
      }
      this.form.weight = ''

      this.$message('请选择差异类型')
    },
    // 获取结算网点名称
    async getjsnetname() {
      const res = await getOutletsList()
      // console.log("网点名称", res);
      this.jsnetdata = res.data
    },
    // 获取开始结束日期
    picker(value) {
      if (value != null) {
        this.form.startTime = value[0]
        this.form.endTime = value[1]
      } else {
        this.form.startTime = ''
        this.form.endTime = ''
      }
    },
    // 重量来源改变时
    zlly(value) {
      this.form.settleWeightSource = value
    },
    // 结算类型改变时
    jslx(value) {
      // console.log(value);
      // this.form.settleTypeId = value
      this.form.settleObject = ''
      this.jsdxmhcx()
      if (value !== 'all') {
        this.isJsdx = false
      } else {
        this.isJsdx = true
      }
    },
    // 重置
    cz(aaa) {
      this.form = aaa
      this.isJsdx = true
      this.form.weight = ''
    }
  }
}
</script>
<style
  lang="scss"
  scoped
>
.box {
  padding: 0px 20px;
  padding: 0px 20px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.flex-bettom {
  display: flex;
  justify-content: space-between;
  display: flex;
  justify-content: space-between;
}

.header {
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  border-radius: 4px;
  min-height: 36px;
}
.cx {
  width: 80px;
  height: 42px;
  background: #2087d0;
  border-radius: 21px;
  color: #fff;
}
.page > span {
  color: #2087d0;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

